<template>
    <view>
        <view class="video-container">
			<view class="video-title">{{video.videoName}}</view>
            <view>
                <video id="myVideo"  
				:src="this.$request.baseUrl+video.videoPath"
							:poster='this.$request.baseUrl+video.videoConverPath'
                    @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls/>
            </view>
            <!-- #ifndef MP-ALIPAY -->
            <view class="uni-list uni-common-mt">
                <view class="uni-list-cell">
                    <view>
                        <view class="uni-label">弹幕内容</view>
                    </view>
                    <view class="uni-list-cell-db">
                        <input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
                    </view>
                </view>
            </view>
            <view class="uni-btn-v">
                <button @click="sendDanmu" class="page-body-button">发送弹幕</button>
            </view>
            <!-- #endif -->
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
			videoId:'',
			video:{},
            src: '',
            danmuList: [],
            danmuValue: ''
        }
    },
	onLoad(e) {
				this.videoId=e.videoId
				this.getVidoeById()
			},
    onReady(res) {
        // #ifndef MP-ALIPAY
        this.videoContext = uni.createVideoContext('myVideo')
        // #endif
    },
    methods: {
        sendDanmu() {
            this.videoContext.sendDanmu({
                text: this.danmuValue,
                color: this.getRandomColor()
            });
            this.danmuValue = '';
        },
			getVidoeById(){
						this.$request.get('video/getVideoById/'+this.videoId ).then(res => {
							if(res.code ==200){
								this.video=res.data;
							 
							}
						 }).catch(res => {
							 
						})
					},
        videoErrorCallback(e) {
            uni.showModal({
                content: e.target.errMsg,
                showCancel: false
            })
        },
        getRandomColor() {
            const rgb = []
            for (let i = 0; i < 3; ++i) {
                let color = Math.floor(Math.random() * 256).toString(16)
                color = color.length == 1 ? '0' + color : color
                rgb.push(color)
            }
            return '#' + rgb.join('')
        }
    }
}
</script>
<style>
	
	.video-container {
	  padding: 10px;
		
	  background-color: #fff;
	  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
	  border-radius: 16px; /* 圆角 */
	  height: 300px;
	}
	.video-title {
	  color: black;
	  padding: 5px;
	  font-size: 16px;
	}
</style>
